<template>
  <section class="page my-orders-page">
    <h1 class="page-title">我的订单</h1>

    <div class="card">
      <div class="card-body">
        <div v-if="loading" class="text-muted">订单加载中...</div>
        <div v-else>
          <el-table :data="list" stripe style="width: 100%" empty-text="暂无数据">
            <el-table-column label="订单号" prop="id" min-width="160" />
            <el-table-column label="商品数量" prop="items" width="120" align="center" />
            <el-table-column label="金额" width="140" align="center">
              <template #default="{ row }"> ¥ {{ row.amount.toFixed(2) }} </template>
            </el-table-column>
            <el-table-column label="状态" width="140" align="center">
              <template #default="{ row }">
                <el-tag
                  :type="
                    row.status === 'pending'
                      ? 'warning'
                      : row.status === 'paid'
                        ? 'info'
                        : row.status === 'shipped'
                          ? 'primary'
                          : row.status === 'completed'
                            ? 'success'
                            : 'info'
                  "
                  size="small"
                >
                  {{ statusName(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="下单时间" prop="createdAt" min-width="180" align="center" />
          </el-table>

          <div class="pagination-section">
            <el-pagination
              v-model:current-page="page"
              v-model:page-size="pageSize"
              :total="total"
              layout="total, prev, pager, next, jumper"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
// 模拟订单列表接口
import { ref, onMounted, computed } from "vue";

type OrderStatus = "pending" | "paid" | "shipped" | "completed" | "cancelled";
interface Order {
  id: string;
  items: number;
  amount: number;
  status: OrderStatus;
  createdAt: string;
}

const loading = ref(false);
const list = ref<Order[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(8);

const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)));

function mockFetchOrders(params: { page: number; pageSize: number }): Promise<{ list: Order[]; total: number }> {
  return new Promise((resolve) => {
    setTimeout(() => {
      const statuses: OrderStatus[] = ["pending", "paid", "shipped", "completed", "cancelled"];
      const ALL: Order[] = Array.from({ length: 41 }).map((_, i) => ({
        id: `ORD-${202509}${String(i + 1).padStart(4, "0")}`,
        items: (i % 5) + 1,
        amount: Math.round(100 + Math.random() * 900),
        status: statuses[i % statuses.length],
        createdAt: `2025-09-${String((i % 28) + 1).padStart(2, "0")} 09:${String(i % 60).padStart(2, "0")}`,
      }));
      const start = (params.page - 1) * params.pageSize;
      resolve({ list: ALL.slice(start, start + params.pageSize), total: ALL.length });
    }, 700);
  });
}

function statusName(s: OrderStatus) {
  return { pending: "待支付", paid: "已支付", shipped: "已发货", completed: "已完成", cancelled: "已取消" }[s];
}
function statusClass(s: OrderStatus) {
  return {
    pending: "bg-warning text-dark",
    paid: "bg-info",
    shipped: "bg-primary",
    completed: "bg-success",
    cancelled: "bg-secondary",
  }[s];
}

async function fetchList() {
  loading.value = true;
  const res = await mockFetchOrders({ page: page.value, pageSize: pageSize.value });
  list.value = res.list;
  total.value = res.total;
  loading.value = false;
}
function changePage(p: number) {
  page.value = p;
  fetchList();
}

onMounted(fetchList);
</script>

<style scoped lang="scss">
.page {
  padding: 16px;
}
.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}
</style>
